<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link rel="icon" href="../static/img/asset.png"/>
    <title>用户登录</title>
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        background: url("../static/img/background.jpeg") no-repeat;
        background-size: 100% 100%;
        font-family: Arial;
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

    .header {
        color: white;
    }

    /* Style inputs */
    input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
    }

    input[type=submit] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        cursor: pointer;
    }

    input[type=submit]:hover {
        background-color: #45a049;
    }

    /* Style the container/contact section */
    .container {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 10px;
        color: white;
    }

    .column {
        background-image: url("../static/img/background2.jpeg");
        border:10px solid rgba(255,255,255,.5);
        float: left;
        width: 40%;
        transform: translateX(80%);//绝对定位+transform，translateX可以移动本省元素的50%
        margin-top: 6px;
        padding: 90px;
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* 响应式布局 */
    @media screen and (max-width: 600px) {
        .column, input[type=submit] {
            width: 100%;
            margin-top: 0;
        }
    }

</style>
<body>
<div class="header">
   <h1>用户登录</h1>
</div>


<div class="container">
    <div style="text-align:center">
        <h1><img src="../static/img/Users-logo.png" alt="头像"/></h1>
        <h3>请正确填写个人信息</h3>
    </div>
    <div class="row">
        <div class="column">
            <form role="form" action = "/loginIn" method="post" >
                <label for="name">姓名</label>
                <input type="text" id="name" name="name" placeholder="您的称呼..">
                <label for="password">密码</label>
                <input type="text" id="password" name="password" placeholder="你的密码..">
                <input type="submit" value="登录" id = "login" value = "login">
                <a href="register.html">没有账号请注册</a>
            </form>
        </div>
    </div>
</div>
</body>
</html>